﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
@section header{
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/vue.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/element-index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/element-index.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/axios.js"))
}
    <div class="container-div" id="deviceManage_LaserMarkContent-vue">
        <!-- 搜索部分 -->
        <div style="margin-bottom:10px">
            <el-row>
                <el-col :span="10">
                    <div>
                        <el-date-picker v-model="timeValue"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div>
                        <el-button type="primary" icon="el-icon-search" round v-on:click="Search">搜索</el-button>
                    </div>
                </el-col>             
            </el-row>            
        </div>
        <!-- 表格部分 -->
        <div>
            <el-table :data="tableData"
                      style="width: 100%"
                      border>
                <el-table-column type="index"
                                 label="序号">
                </el-table-column>
                <el-table-column prop="OccurTime"
                                 label="记录时间">
                </el-table-column>
                <el-table-column prop="MaterialCode"
                                 label="物料码">
                </el-table-column>
                <el-table-column prop="Result"
                                 label="打码内容">
                </el-table-column>
            </el-table>
        </div>
        <div style="margin:50px 30px;margin-top:20px;">
            <el-pagination background
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total" v-on:size-change="handleSizeChange" v-on:current-change="handleCurrentChange"
                           :current-page="pageSize" :page-sizes="[5,10,20]" :page-size="limit">
            </el-pagination>
        </div>
    </div>

<script>
    let app = new Vue({
        el: "#deviceManage_LaserMarkContent-vue",
        data: {
            timeValue: [],
            tableData: [],
            total: 0,
            pageSize: 1,  // 当前页码
            limit: 5  //每页数据条数
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = 1;
                this.limit = val;
                this.selectOrder();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageSize = val;
                this.selectOrder();
            },
            // 搜索
            Search() {
                const _start = this.timeValue[0];
                const _end = this.timeValue[1];
                const searchStart = _start.getFullYear() + "-" + (_start.getMonth() + 1) + "-" + _start.getDate();
                const searchEnd = _end.getFullYear() + "-" + (_end.getMonth() + 1) + "-" + _end.getDate();
                let url = '@Url.Content("~/DeviceManage/DeviceDetail/GetLaserMarkRecord")'
                axios.get(url, {
                    params: {
                        stime: searchStart,
                        etime: searchEnd,
                        pageSize: this.pageSize,
                        limit: this.limit
                    }
                }).then(res => {
                    console.log(res);
                    let result = res.data.result;
                    this.tableData = [];
                    this.total = res.data.total;
                    for (let i = 0; i < result.length; i++) {
                        let _time = result[i].OccurTime.split(".")[0];
                        let showTime = _time.replace("T", " ");
                        this.tableData.push({
                            MaterialCode: result[i].MaterialCode,
                            Result: result[i].Result,
                            OccurTime: showTime
                        });
                    }
                }).catch(err => {
                    this.$message({
                        showClose: false,
                        message: '请求错误：' + err,
                        type: 'error'
                    });
                })
            }
        },
        mounted() {
            this.timeValue.push(new Date());
            this.timeValue.push(new Date());
            this.Search();
        }
    })
</script>

